<template>
  <section id="solutions" class="solutions">
    <div class="container">
        <div class="section-header">
          <h2 class="section-title">行业解决方案</h2>
          <p class="section-subtitle">针对不同行业的定制化AI解决方案，实现多方共赢</p>
        </div>
      <div class="solutions-content">
        <div class="solution-tabs">
          <button 
            v-for="solution in solutions" 
            :key="solution.id"
            class="tab-button"
            :class="{ active: activeSolution === solution.id }"
            @click="activeSolution = solution.id"
          >
            {{ solution.title }}
          </button>
        </div>
        <div class="solution-content">
          <div v-for="solution in solutions" :key="solution.id" v-show="activeSolution === solution.id" class="solution-detail">
            <div class="solution-info">
              <h3>{{ solution.title }}</h3>
              <p>{{ solution.description }}</p>
              <ul class="solution-features">
                <li v-for="feature in solution.features" :key="feature">
                  <i class="fas fa-check"></i>
                  {{ feature }}
                </li>
              </ul>
            </div>
            <div class="solution-visual">
              <div class="solution-icon">
                <i :class="solution.icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 反作弊机制 -->
      <div class="anti-cheat-section">
        <div class="section-header">
          <h2 class="section-title">智能反作弊系统</h2>
        </div>
        
        <div class="anti-cheat-content">
          <div class="verification-levels">
            <h3 class="levels-title">多层级验证体系</h3>
            <div class="levels-grid">
              <div class="level-card" v-for="(level, index) in verificationLevels" :key="index">
                <div class="level-badge" :class="level.class">
                  <i :class="level.icon"></i>
                </div>
                <h4>{{ level.title }}</h4>
                <p>{{ level.description }}</p>
                <div class="level-requirements">
                  <span v-for="req in level.requirements" :key="req" class="requirement-tag">
                    <i class="fas fa-shield-alt"></i>
                    {{ req }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="ai-scoring-system">
            <h3 class="scoring-title">AI智能评分系统</h3>
            <div class="scoring-flow">
              <div class="flow-step" v-for="(step, index) in scoringSteps" :key="index">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <h4>{{ step.title }}</h4>
                  <p>{{ step.description }}</p>
                </div>
                <div class="step-icon">
                  <i :class="step.icon"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="certification-system">
            <h3 class="cert-title">智能认证与勋章系统</h3>
            <div class="cert-grid">
              <div class="cert-card">
                <div class="cert-icon success">
                  <i class="fas fa-medal"></i>
                </div>
                <h4>优秀表现</h4>
                <p>回答质量优秀，获得专属勋章和信誉加分</p>
                <div class="cert-benefits">
                  <span class="benefit">+ 信誉分</span>
                  <span class="benefit">专属勋章</span>
                </div>
              </div>
              <div class="cert-card">
                <div class="cert-icon warning">
                  <i class="fas fa-exclamation-triangle"></i>
                </div>
                <h4>表现一般</h4>
                <p>回答质量一般，获得基础认证但无额外奖励</p>
                <div class="cert-benefits">
                  <span class="benefit">基础认证</span>
                  <span class="benefit">无额外奖励</span>
                </div>
              </div>
              <div class="cert-card">
                <div class="cert-icon danger">
                  <i class="fas fa-times-circle"></i>
                </div>
                <h4>表现不佳</h4>
                <p>回答质量较差，扣除信誉分且无认证</p>
                <div class="cert-benefits">
                  <span class="benefit penalty">-  信誉分</span>
                  <span class="benefit penalty">无认证</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 盈利模式 -->
      <div class="revenue-model">
        <h3 class="revenue-title">盈利模式</h3>
        <div class="revenue-grid">
          <div class="revenue-card">
            <div class="revenue-icon">
              <i class="fas fa-percentage"></i>
            </div>
            <h4>智能匹配佣金</h4>
            <p>企业端抽成3-7%，根据项目价值动态调整</p>
          </div>
          <div class="revenue-card">
            <div class="revenue-icon">
              <i class="fas fa-certificate"></i>
            </div>
            <h4>能力认证收费</h4>
            <p>开发者端按认证报告生成收费，确保质量</p>
          </div>
          <div class="revenue-card">
            <div class="revenue-icon">
              <i class="fas fa-coins"></i>
            </div>
            <h4>区块链存证服务</h4>
            <p>勋章铸造费用，永久存储项目成果</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'SolutionsSection',
  data() {
    return {
      activeSolution: 'computer',
      solutions: [
        {
          id: 'computer',
          title: '计算机行业',
          icon: 'fas fa-laptop-code',
          description: '为计算机行业提供智能化的人才培养、技能认证和项目匹配解决方案。',
          features: [
            '技能认证体系',
            '项目实战训练',
            '人才能力评估',
            '就业匹配服务'
          ]
        },
        {
          id: 'machinery',
          title: '机械制造业',
          icon: 'fas fa-cogs',
          description: '为机械制造企业提供智能化生产管理、技术升级和人才培养解决方案。',
          features: [
            '智能制造技术',
            '设备维护优化',
            '工艺改进指导',
            '技术人才培养'
          ]
        },
        {
          id: 'biomedical',
          title: '生物医学行业',
          icon: 'fas fa-microscope',
          description: '为生物医学领域提供专业化的研究支持、技术培训和人才发展解决方案。',
          features: [
            '专业研究支持',
            '实验技术培训',
            '数据分析能力',
            '创新项目孵化'
          ]
        }
      ],
      verificationLevels: [
        {
          title: '低级任务',
          class: 'level-basic',
          icon: 'fas fa-user-check',
          description: '基础技能验证，确保身份真实性',
          requirements: ['规定时段扫脸验证']
        },
        {
          title: '初级任务',
          class: 'level-primary',
          icon: 'fas fa-shield-alt',
          description: '双重验证机制，提升安全等级',
          requirements: ['扫脸验证', '反作弊测验（概率较低）']
        },
        {
          title: '中级任务',
          class: 'level-intermediate',
          icon: 'fas fa-user-graduate',
          description: '综合能力评估，确保专业水准',
          requirements: ['扫脸验证', '反作弊测验（概率较高）']
        },
        {
          title: '高级任务',
          class: 'level-advanced',
          icon: 'fas fa-crown',
          description: '最高级别验证，线下深度考核',
          requirements: ['扫脸验证', '线下约定时间前往规定地点考核']
        }
      ],
      scoringSteps: [
        {
          title: '智能提问生成',
          description: '基于企业任务描述，AI自动生成针对性问题，模拟真实面试场景',
          icon: 'fas fa-brain'
        },
        {
          title: '语音识别转换',
          description: '利用Whisper模型将用户口述内容转换为文本，确保信息准确记录',
          icon: 'fas fa-microphone'
        },
        {
          title: 'AI智能评分',
          description: '结合OpenCV视觉分析，对回答内容进行多维度智能评分',
          icon: 'fas fa-robot'
        },
        {
          title: '结果认证',
          description: '根据评分结果颁发相应等级勋章，建立可信度体系',
          icon: 'fas fa-certificate'
        }
      ]
    }
  },
  methods: {
    activateIndustry(industryId) {
      // 激活指定的行业标签
      if (this.solutions.some(solution => solution.id === industryId)) {
        this.activeSolution = industryId
      }
    }
  }
}
</script>

<style scoped>
.solutions {
  background: rgba(255, 255, 255, 0.02);
  padding: 120px 0;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 40px 20px;
  border-radius: 24px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.2rem;
  color: white;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.solution-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}

.tab-button:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.tab-button.active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.6);
}

.solution-content {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
}

.solution-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.solution-info h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.solution-info p {
  color: white;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.solution-features {
  list-style: none;
}

.solution-features li {
  padding: 0.8rem 0;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.solution-features i {
  color: #3b82f6;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.solution-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.solution-icon {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
  animation: iconFloat 3s ease-in-out infinite;
}

.solution-icon i {
  font-size: 3rem;
  color: white;
}

@keyframes iconFloat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 反作弊机制样式 */
.anti-cheat-section {
  margin-top: 4rem;
  padding: 3rem 0;
  border-top: 2px solid rgba(59, 130, 246, 0.2);
}

.anti-cheat-content {
  display: grid;
  gap: 3rem;
}

.verification-levels {
  text-align: center;
}

.levels-title {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 2rem;
  font-weight: 600;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.level-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  padding: 2rem 3rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.level-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s;
}

.level-card:hover::before {
  left: 100%;
}

.level-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

.level-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
  position: relative;
  z-index: 2;
}

.level-basic {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.level-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.level-intermediate {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.level-advanced {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.level-card h4 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.level-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
}

.level-requirements {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.requirement-tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-weight: 500;
}

/* AI评分系统样式 */
.ai-scoring-system {
  text-align: center;
}

.scoring-title {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 2rem;
  font-weight: 600;
}

.scoring-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.flow-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.flow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: left 0.5s;
}

.flow-step:hover::before {
  left: 100%;
}

.flow-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
  border-color: rgba(0, 212, 255, 0.4);
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00d4ff, #3b82f6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto 1rem;
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

.step-content h4 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.step-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

.step-icon {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: #00d4ff;
}

/* 认证系统样式 */
.certification-system {
  text-align: center;
}

.cert-title {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 2rem;
  font-weight: 600;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.cert-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.cert-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s;
}

.cert-card:hover::before {
  left: 100%;
}

.cert-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

.cert-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: white;
}

.cert-icon.success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.cert-icon.warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.cert-icon.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.cert-card h4 {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cert-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.cert-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.benefit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.benefit.penalty {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* 盈利模式样式 */
.revenue-model {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid rgba(59, 130, 246, 0.2);
}

.revenue-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: white;
  font-weight: 600;
}

.revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.revenue-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.2);
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.revenue-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

.revenue-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.revenue-icon i {
  font-size: 1.5rem;
  color: white;
}

.revenue-card h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.revenue-card p {
  color: white;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .solution-detail {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .solution-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .levels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .level-card {
    padding: 2rem 1.5rem;
    min-height: 250px;
  }
}

@media (max-width: 768px) {
  .levels-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .level-card {
    padding: 2rem 1.5rem;
    min-height: 250px;
  }
  
  .level-badge {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }
  
  .level-card h4 {
    font-size: 1.3rem;
  }
  
  .level-card p {
    font-size: 0.95rem;
  }
}
</style>